@import './base.css';

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 防止水平滚动条出现 */
}

#app {
  width: 100%;
  min-height: 100vh; /* 确保页面至少占满视口高度 */
  box-sizing: border-box;
  padding: 2rem;
  font-weight: normal;
  display: flex;
  flex-direction: column; /* 默认为垂直堆叠布局 */
  justify-content: flex-start; /* 内容从顶部开始排列 */
  align-items: center; /* 水平居中内容 */
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  #app {
    flex-direction: row; /* 在大屏幕下改为水平布局 */
    padding: 0 2rem;
    height: 100vh;
    justify-content: space-between; /* 让子元素在水平方向均匀分布空间 */
    align-items: stretch; /* 让子元素在垂直方向占满可用空间 */
  }
}